<template>

  <div :style="useThemeStore().themeInfo" class="wrapper">
    <div class="main">主题色</div>
    <div class="sub">副主题色</div>
    <div class="price">￥50</div>
    <div class="bg">标签</div>
    <SubTheme />
    <div class="center">
      <wd-button @click="handleChange">点击换肤</wd-button>
    </div>
  </div>
</template>


<script setup lang="ts">
import { jAlert3 } from '@/utils';
import { useThemeStore } from '@/store';
import SubTheme from './components/SubTheme.vue';



onShareAppMessage(() => ({
  title: '换肤',
  path: '/pagesA/theme/index'
}));

onMounted(() => {
  console.log('打印***页面')
})

const hexToRgbStr = (hex: string): string => {
  try {
    // 扩展 3 位格式到 6 位
    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
      return r + r + g + g + b + b;
    });
    // 解析 6 位 HEX 格式
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if (!result) return ''
    return `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}`;

  } catch (error) {
    return ''
  }
}

const handleChange = () => {
  // const mainColor = '#FF4757'
  // const mainRgbColor = hexToRgbStr(mainColor)
  // const colorStr = `--mainColor:${mainColor};--mainRgbColor:${mainRgbColor};--subColor:#FFECED;--priceColor:#FF3838;`
  // useThemeStore().setTheme(colorStr)


  const lightStr = `--bg:#F8F8F8;--mainColor:#FF4757;--mainRgbColor:255,71,87;--subColor:#FFECED;--priceColor:#FF3838;`
  const darkStr = `--bg:#666;--mainColor:#FFFFFF;--mainRgbColor:255,107,129;--subColor:#2E1F21;--priceColor:#FF5E57;`
  const curStr = useThemeStore().themeInfo
  useThemeStore().setTheme(curStr === lightStr ? darkStr : lightStr)
}


</script>

<style scoped lang="scss">
// @import url('@/styles/skin.scss');

// .main {
//   color: var(--mainColor);
// }

// .sub {
//   color: var(--subColor);
// }

// .price {
//   color: var(--priceColor);
// }

// .bg {
//   background: rgba(var(--mainRgbColor), 0.1);
// }

.wrapper {
  background-color: $color-bg;
  height: 100vh;
}

.main {
  color: $color-theme;
}

.sub {
  color: $color-theme-d;
}

.price {
  color: $color-price;
}

.bg {
  display: inline-block;
  border-radius: 12px;
  padding: 4px 10px;
  background: rgba($color-rgb-theme, 0.5);
}

.xxx {}
</style>
